<template>
  <div class="app-container">
    <el-card>
      <title-line title="基本信息" />
      <el-form ref="elForm" :model="formData" :rules="rules" label-width="120px">
        <el-row>
          <el-col :lg="14" :xl="10">
            <el-form-item label="银行卡名称：" prop="bankName">
              <el-input v-model="formData.bankName" placeholder="请输入银行卡名称" clearable />
            </el-form-item>
            <el-form-item label="银行卡LOGO：" prop="icon">
              <upload-image
                :isShowTip="true"
                :lazy="true"
                :file-type="['jpg', 'png', 'jpeg']"
                file-pixel="120*120"
                :file-size="1"
                :response-fn="handleResponse"
                @on-change="uploadChange"
                v-model="formData.icon"
              />
            </el-form-item>
            <el-form-item label="银行卡背景：" prop="backgroundImage">
              <upload-image
                :isShowTip="true"
                :lazy="true"
                :file-type="['jpg', 'png', 'jpeg']"
                file-pixel="330*190"
                :file-size="1"
                :response-fn="handleResponse"
                @on-change="uploadChange"
                v-model="formData.backgroundImage"
              />
            </el-form-item>
            <el-form-item label="显示顺序：" prop="sort">
              <el-input v-model="formData.sort" placeholder="请输入排序值" clearable />
              <p style="color: #909399" class="ft-12">数值越小越靠前</p>
            </el-form-item>
            <el-form-item label="是否显示：" prop="status">
              <el-radio-group v-model="formData.status">
                <el-radio v-for="(item, index) in STATUS" :key="index" :label="item.value">{{
                  item.label
                }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button @click="resetForm"> 取消</el-button>
              <el-button type="primary" @click="submitForm">确定</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import rules from './rules'
import { SHOW_STATUS } from '@/enum/pay'
export default {
  name: 'BrankCardDetail',
  props: {},
  data() {
    return {
      formData: {
        bankName: '',
        icon: '',
        backgroundImage: '',
        sort: 99,
        status: 0
      }
    }
  },
  computed: {
    rules() {
      return rules
    },
    STATUS() {
      return SHOW_STATUS
    }
  },
  watch: {},
  created() {
    this.getDetail()
  },
  mounted() {},
  methods: {
    // type: 'update'获取详情
    async getDetail() {
      const { id, type } = this.$route.query
      if (type !== 'update') return
      const { data } = await this.$http.bank.getDetail(id)
      for (const key in this.formData) {
        this.formData[key] = data[key]
      }
    },
    // 新增
    async add() {
      const { status, msg } = await this.$http.bank.add(this.formData)
      if (status === 200) {
        this.$message.success('添加成功')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    },
    // 编辑
    async updated() {
      const { id } = this.$route.query
      const { status, msg } = await this.$http.bank.update({ params: this.formData, id })
      if (status === 200) {
        this.$message.success('编辑成功')
        this.$router.back(-1)
      } else {
        this.$message.error(msg)
      }
    },
    handleResponse(response) {
      return response.data.url
    },
    uploadChange() {
      if (this.formData.icon) {
        this.$refs.elForm.validateField('icon')
      }
      if (this.formData.backgroundImage) {
        this.$refs.elForm.validateField('backgroundImage')
      }
    },
    // 确定
    submitForm() {
      const { type } = this.$route.query
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        this.loading = true
        if (type === 'update') {
          this.updated()
        } else {
          this.add()
        }
        this.loading = false
      })
    },
    // 重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
